<template>
  <div class="deatilpurchase">
    <pb-drawer v-model="isVisible" :title="'采购订单详情'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn">
      <div class="flex top">
        <div>采购单号：</div>
        <div>{{ orderpurchaseOrder.purchaseOrderNo }}</div>
        <div>到货日期：</div>
        <div>{{ orderpurchaseOrder.deliveryDate }}</div>
        <div>总金额：</div>
        <div><span class="colorgreen">{{ orderpurchaseOrder.totalAmount }}</span><span class="smallspan">元</span></div>
        <div>备注：</div>
        <div>{{ orderpurchaseOrder.remark }}</div>
      </div>
      <div class="flex-1">
        <pb-card padding="0" height="100%">
          <div class="m-t2 m-b2 lines">

          </div>
          <div class="content-box">
            <div class="table-box flex">
              <div class="left-tree-box">
                <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" :treeData="skuTreeData"
                  :defaultProps="treeProps"></pb-tree>
              </div>
              <div class="table-right">
                <pb-table :column="SKUColumn" :tableData="OrderTableData" :bottomElement="['pb-page']">
                </pb-table>
                <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
                  @onChange="onPagesChange" :total="pages.total"></pb-pagination>
              </div>
            </div>
          </div>
        </pb-card>
      </div>
      <template #footer>
      </template>
    </pb-drawer>
  </div>
</template>
<script setup lang="ts">
import { getSkuClassList } from "@/api/Sku";
import { GetOrderDetailsListApi } from '@/api/Purchasing'
const isVisible = ref(false)
const confirmFn = () => {

}
const CancelFn = () => {
  isVisible.value = false
}
const GetOrderListFn = () => {
  GetOrderDetailsListApi({
    "currentPage": pages.value.currentPage,
    "pageSize": pages.value.pageSize,
    "purchaseOrderId": orderpurchaseOrder.value.purchaseOrderId,
    "skuClassCode": skuClassCode.value
  }).then(res => {
    OrderTableData.value = res.data.records
    // console.log('222', res.data)
    pages.value.total = res.data.total
  })
}
const orderpurchaseOrder = ref({} as any)
const show = (purchaseOrderId: any) => {
  pages.value = pageInit()
  skuClassCode.value = ''
  orderpurchaseOrder.value = purchaseOrderId
  getSkuClassList({
    pageSize: -1
  }).then((res) => {
    skuTreeData.value = [
      {
        skuClassName: "全部",
        children: res.data.records,
      },
    ]
    isVisible.value = true
    GetOrderListFn();
    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");

      treeH.value = height[0].offsetHeight + "px";
    });
  });
}
defineExpose({
  show
})
const OrderTableData = ref([]);
const skuTreeData = ref([] as any);
const SKUColumn = reactive([
  {
    key: "skuClassName",
    name: "商品种类"
  },
  {
    key: "skuName",
    name: "商品名称",
  },
  {
    key: "price",
    name: "单价(元)",
    align: "right",
  },
  {
    key: "purchaseQuantity",
    name: "采购量",
    align: "right",
  },
  {
    key: 'actualQuantity',
    name: '实际采购量',
    align: "right",
  },
  {
    key: 'quantityChange',
    name: '增减数量',
    align: "right",
  },
  {
    key: "accountingUnitName",
    name: "计量单位",
  }, {
    key: "specifications",
    name: "规格",
  },
  {
    key: 'smallOrderQuantity',
    name: '最小订货数量',
    align: "right",
  },
  {
    key: "unitWeight",
    name: "单位重量（kg)",
    align: "right",
  },
  {
    key: "amount",
    name: "金额(元)",
    align: "right",
  },
  {
    key: 'remark',
    name: '备注',
    width: 120
  },
]);
const treeProps = { children: "children", label: "skuClassName" };
const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 15,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  GetOrderListFn()
};

// 选择节点
const skuClassCode = ref("");
const nodeClick = ({ curNode }) => {
  skuClassCode.value = curNode.skuClassCode;
  GetOrderListFn();
};


let treeH = ref(null as any);
</script>
<style lang="scss" scoped>
.deatilpurchase {
  .top {
    padding-top: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    align-items: center;

    >div:nth-child(2n) {
      line-height: 22px;
      width: 187px;
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }

    .colorgreen {
      font-family: DIN, DIN;
      font-weight: 500;
      font-size: 16px;
      color: #0D968B;
      line-height: 24px;
    }

    .smallspan {
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .left-tree-box {
    padding-top: 0;
  }

  .table-right {
    // width: 80%;
    flex: 1;
    height: 100%;
    // padding: 16px;
    box-sizing: border-box;
  }

  .lines {
    background: rgba(0, 0, 0, 0.10);
    width: 100%;
    height: 1px;
  }
}
</style>
